<template>
	<view class="hui">
		<view class="head">
			<u-navbar :autoBack="true" :safeAreaInsetTop="true" :placeholder="true" bgColor="transparent">
				<view class="u-nav-slot b_flex_c" slot="center">
					<view class="city">分货记录</view>
				</view>
			</u-navbar>
		</view>
		<view class="box">
			<view class="list_info">
				<view class="flex">
					<image @click="toImg()" class="l_img" :src="info.goods_img"></image>
					<view>
						<view class="name">
							{{info.goods_name}}
						</view>
						<view class="flex sku">
							<view>毛重约{{info.mz}}斤</view>
							<view class="xian"></view>
							<view>净重约{{info.jz}}斤</view>
						</view>
					</view>
					<view class="status">{{info.statusText}}</view>
				</view>
				<view class="num_box">
					<view class="flexc mt">
						<view> 应收(件):</view>
						<view class="num">{{info.y_num}}</view>
					</view>
					<view class="flexc mt">
						<view> 已收(件):</view>
						<view class="num">{{info.fj_num}}</view>
					</view>
					<view class="flexc mt">
						<view> 已分(件):</view>
						<view class="num">{{info.fj_num}}</view>
					</view>
				</view>
			</view>
	
			<view class="user_box">
				<view class="heads">
					<view>分货记录</view>
					<view>合计分货{{info.num}}件</view>
					</view>
				<view class="msg">{{info.createtime}}</view>
				
				<view class="flexc msg fh_box">
					<view>客户名称</view>
					<view>分货数量</view>
				</view>
				
				
				<view @click="fj(item)" :class="['flexc','mtop','fh_box']"
					v-for="(item,index) in list" :key="index">
					<view>{{item.user.nickname}}</view>
					<view>{{item.num}}</view>
				</view>
	
	
			</view>
	
		</view>
	</view>
</template>

<script>
	import {fhRecord} from "@/require/api.js";
	export default{
		data(){
			return{
				params: {
					ids: '',
					name: '',
					token: ''
				},
				info: {},
				list: [],
			}
		},
		methods:{
			toImg() {
				uni.previewImage({
					urls: [this.info.goods_img]
				})
			},
			async getInfo() {
			
				let {code,data}=await fhRecord(this.params);
				if(code==1){
					this.info = data.info;
					this.list = data.list;
				}
			}
		},
		onLoad(e) {
			if (e.ids) {
				this.params.ids = e.ids;
			}
			if(e.fid){
				this.params.f_id = e.fid;
			}
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-navbar--fixed {
			background: linear-gradient(to bottom, #B9DDFF, #D7EAF3);
		}
	}
	
	.head {
		background: linear-gradient(to bottom, #B9DDFF, #D7EAF3);
	}
	.box {
		box-sizing: border-box;
		padding: 20rpx;
	}
	
	.list_info {
		box-sizing: border-box;
		padding: 20rpx;
		background-color: white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.l_img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 20rpx;
		vertical-align: bottom;
		margin-right: 10rpx;
	}
	
	.flex {
		display: flex;
	}
	
	.flexc {
		display: flex;
		align-items: center;
	}
	
	.flexcc {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.flexcs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	
	.sku {
		font-size: 24rpx;
		color: #C1C1C1;
		margin-top: 20rpx;
		align-items: center;
	}
	
	.xian {
		width: 3rpx;
		height: 30rpx;
		background-color: #C1C1C1;
		margin: 0 20rpx;
	}
	
	.num_box {
		font-size: 26rpx;
		color: #C1C1C1;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	
	}
	
	.mt {
		margin-top: 20rpx;
		width: 33.33%;
	}
	
	.num {
		font-size: 28rpx;
		color: black;
		margin-left: 10rpx;
	}
	
	.status {
		margin-left: auto;
		font-size: 26rpx;
	}
	
	.record_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: white;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
		margin-bottom: 20rpx;
	}
	
	.user_box {
		background-color: white;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx 20rpx 20rpx 20rpx;
	}
	
	.user_info {
	
		box-sizing: border-box;
		padding: 20rpx;
	}
	
	.u_info_color {
		background-color: #F3F3F3;
		border-radius: 20rpx;
	}
	
	.mtop {
		margin-top: 20rpx;
	}
	
	.key {
		color: #4B91D9;
		font-weight: bold;
		border: 2rpx solid #4B91D9;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 10rpx;
	
	}
	
	.mr {
		margin-right: 15rpx;
	}
	
	.u_num_box {
		text-align: center;
	}
	
	.fw {
		font-weight: bold;
		margin-top: 10rpx;
	}
	
	.nums_box {
		text-align: center;
	}
	
	.btn_box {
		box-sizing: border-box;
		padding: 20rpx 20rpx 20rpx 20rpx;
		justify-content: space-between;
	}
	
	.f_btn {
		width: 48%;
		text-align: center;
		background-color: #13AE67;
		color: white;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 15rpx;
	}
	.blue{
		color:#65A3D3;
	}
	.pl{
		width: 120rpx;
		text-align: center;
		background-color: #13AE67;
		color: white;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
	}
	.record{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
	}
	.look{
		color:#5590E8;
	}
	.heads{
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.msg{
		font-size: 26rpx;
		color:#9B9B9B;
	}
	.fh_box{
		justify-content: space-between;
		margin-top: 15rpx;
	}
</style>